<template>
	<view>
		<view class="pad-lr-30 pad-tb-30 bgfff display-sb align-items mar-top-20">
			<text class="fontSize-30">提现方式</text>
			<view class="display align-items">
				<image src="/static/img/bank.png" class="wid-hig-48" mode=""></image>
				<text class="ml10 fontSize-30">仅支持银行卡提现</text>
			</view>
		</view>
		<!-- 银行卡选项，若无银行卡给跳转入口 -->
		<view class="pad-lr-30 pad-tb-30 bgfff display-sb align-items mar-top-2">
			<text class="fontSize-30">银行卡</text>
			<view class="display align-items" v-if="selectedBank">
				<image src="/static/img/bank.png" class="wid-hig-48" mode=""></image>
				<text class="ml10 fontSize-30">
					{{ selectedBank.bank_title }}（尾号{{ getCardTail(selectedBank.bank_number) }}）
				</text>
				<text class="ml10 fontSize-26" style="color:#2DB295;" @click="goBankCardList">管理</text>
			</view>
			<view class="display align-items" v-else>
				<text class="fontSize-30" style="color:#999;">未绑定银行卡</text>
				<text class="ml10 fontSize-26" style="color:#2DB295;" @click="goBankCardList">去添加</text>
			</view>
		</view>
		
		<view class="mar-top-20 pad-lr-30 pad-tb-30 bgfff">
			<view class="fontSize-30">提现金额</view>
			<view class="pad-tb-30 bordbottom display-sb align-items">
				<view class="fontSize-30">￥</view>
				<input type="digit" placeholder="请输入" v-model="money" class="width-75 fontSize-30" @input="handleInput" @blur="handleInput"/>
				<view class="fontSize-26  nowrap" style="color: #F6911B;" @click="moneyall">全部提现</view>
			</view>
			<view class="mar-top-20 fontSize-26 col-6">
				可提现金额￥{{num}}
			</view>
		</view>
		<view class="width-100 bgfff bottom_view display-ce poFi bottom-0">
			<view class="col-f fontSize-32 radius-40 display-ce align-items btn" @click="_userSubWithdraw">
				确认提现
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import {userSubWithdraw,shopSubWithdraw, bankCardList as getBankCardList} from '@/utils/api'
onLoad((options: any)=>{
    type.value = options.type
    num.value = options.num
    fetchBankCards()
})
const type = ref(1)
const num = ref(0)
const money = ref()
const bankCards = ref<any[]>([])
const selectedBank = ref<any | null>(null)
const moneyall = () =>{
	money.value = num.value
}
const _userSubWithdraw = () =>{
	if (!selectedBank.value?.id) {
		uni.showToast({ title: '请先绑定并选择银行卡', icon: 'none' })
		return
	}
	if(type.value==1){
			const payload: any = { money: money.value, bank_id: selectedBank.value.id }
			userSubWithdraw(payload).then((res: any)=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				num.value = Math.floor((num.value-money.value)*100)/100
				money.value = ''
				uni.$emit('upnum',num.value)
			}
		})
	}else{
		const payload: any = { money: money.value, bank_id: selectedBank.value.id }
		shopSubWithdraw(payload).then((res: any)=>{
			uni.showToast({
				title:res.msg,
				icon:'none'
			})
			if(res.code==1){
				num.value = Math.floor((num.value-money.value)*100)/100
				money.value = ''
				uni.$emit('upnum',num.value)
			}
		})
	}
	
}
const   handleInput=(e: any)=> {
      let value = e.detail.value;
      // 使用正则表达式限制只能输入数字和点
      value = value.replace(/[^\d.]/g, '');
      // 匹配两位小数
      const match = value.match(/^(\d+)((\.\d{0,2})?)/);
	console.log(value,match)
      if (match) {
        // 只保留两位小数
        value = match[0] ;
      } else {
        // 如果用户尝试输入的第一个字符是点，则不允许
        value = '';
      }
      money.value = value;
    }

// 获取银行卡列表，优先选中默认卡
const fetchBankCards = () =>{
    getBankCardList({}).then((res: any)=>{
        if(res.code==1){
            const list = res.data?.address || res.data || []
            bankCards.value = list
            if(list.length>0){
                const def = list.find((i:any)=> Number(i.is_default)===1)
                selectedBank.value = def || list[0]
            } else {
                selectedBank.value = null
            }
        }
    })
}

// 取银行卡尾号
const getCardTail = (numStr: string) =>{
    if(!numStr) return ''
    return String(numStr).slice(-4)
}

// 跳转到银行卡列表
const goBankCardList = () =>{
    uni.navigateTo({ url:'/mypages/bankcardlist/bankcardlist' })
}

</script>

<style lang="scss">
page{
	background-color: #F5F5F5;
}
.bordbottom{
	border-bottom: 2rpx solid #F1F1F1;
}
.bottom_view{
	padding-top: 20rpx;
	padding-bottom: 80rpx;
}
.btn{
	width: 600rpx;
	height: 80rpx;
	background-color: #2DB295;
}
</style>
